<!DOCTYPE html>
<html>
<head>
    <title>AI疾病诊断小助手</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1 class="title">AI疾病诊断小助手</h1>
    <div class="chat-container">
        <div class="input-area">
            <textarea id="question-input" placeholder="Type your question here..."></textarea>
            <button id="send-btn" disabled>Send</button>
        </div>
        <div class="response-area" id="response-area">
            <!-- Response will be displayed here -->
        </div>
    </div>

    <script>
        const input = document.getElementById('question-input');
        const sendBtn = document.getElementById('send-btn');
        const responseArea = document.getElementById('response-area');

        input.addEventListener('input', () => {
            sendBtn.disabled = input.value.trim() === '';
        });

        sendBtn.addEventListener('click', async () => {
            const question = input.value.trim();
            if (!question) return;

            sendBtn.disabled = true;
            responseArea.innerHTML = 'Thinking...';

            try {
                const response = await fetch('/ask', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8',
                    },
                    body: JSON.stringify({ question })
                });

                const data = await response.json();
                if (data.error) {
                    responseArea.innerHTML = `Error: ${data.error}`;
                } else if (data.parsed_items) {
                    responseArea.innerHTML = formatParsedItems(data.parsed_items);
                } else {
                    responseArea.innerHTML = data.message;
                }
            } catch (error) {
                responseArea.innerHTML = `Error: ${error.message}`;
            } finally {
                sendBtn.disabled = false;
            }
        });

        function formatParsedItems(items) {
            // Define mapping for key names
            const keyMapping = {
                'NAME': '疾病名称',
                'REASON': '发病原因',
                'RELIABILITY': '可信度',
                'MORE': '进一步处理',
                'METHOD': '处理办法'
            };

            return items.map(item => {
                // Sort keys to ensure 疾病名称 is first
                const sortedKeys = Object.keys(item).sort((a, b) => {
                    if (a === 'NAME') return -1;
                    if (b === 'NAME') return 1;
                    return 0;
                });

                return `<div class="item">${
                    sortedKeys.map(key => {
                        const displayKey = keyMapping[key] || key;
                        return `<div><strong>${displayKey}:</strong> ${item[key]}</div>`;
                    }).join('')
                }</div>`;
            }).join('');
        }
    </script>
    <div class="footer">
        所有结果均由AI生成，仅供参考！
    </div>
</body>
</html>